<template>
  <div
    class="d-flex"
    :class="{'just-center':align ==='center','just-right':align === 'right','just-left': align==='left'}"
  >
    <div class="layui-box layui-laypage layui-laypage-default">
      <a href="javascript:;" class="layui-laypage-prev" :class="{'layui-disabled': current + 1 === 1}" v-show="showEnd" @click.prevent="home">
        <i class="layui-icon layui-icon-prev" v-if="showType==='icon'"></i>
        <template v-else>首页</template>
      </a>

      <a href="javascript:;" :class="{'layui-disabled': current + 1 === 1}" @click.prevent="prev">
        <i class="layui-icon layui-icon-left"  v-if="showType==='icon'"></i>
        <template v-else>上一页</template>
      </a>
      <a v-if="current + 1 -2 > 1 && pages.length > 5" href="javascript:;">...</a>
      <template v-for="(item,index) in pages" >
        <a v-if="current + 1 - 2 <= item && current + 1 + 2 >= item" :key="'page'+index" href="javascript:;" :class="[item===(current + 1) ? theme: '',item===(current + 1) ? 'active' : '']" @click.prevent="changeCurrent(index)">{{item}}</a>
      </template>
      <a v-if="current + 1 + 2 < pages.length && pages.length > 5" href="javascript:;">...</a>
      <a href="javascript:;" :class="{'layui-disabled': current + 1 === pages.length}" @click.prevent="next">
        <i class="layui-icon layui-icon-right" v-if="showType==='icon'" ></i>
        <template v-else>下一页</template>
      </a>
      <a href="javascript:;" class="layui-laypage-next" v-show="showEnd" :class="{'layui-disabled': current + 1 === pages.length}" @click.prevent="end">
        <i class="layui-icon layui-icon-next" v-if="showType==='icon'"></i>
        <template v-else>尾页</template>
      </a>
    </div>
    <div class="page-total ml1" v-show="hasTotal">
      到第
      <input type="text" class="layui-input" @keydown="changePage" v-model="cur" /> 页 共{{this.pages.length}}页
    </div>
    <div class="layui-input-inline page-select ml1" v-show="hasSelect" @click="changeSelect()">
      <div class="layui-unselect layui-form-select" :class="{'layui-form-selected': isSelect}">
        <div class="layui-select-title">
          <input
            type="text"
            placeholder="请选择"
            readonly
            v-model="optList[optIndex]"
            class="layui-input layui-unselect"
          />
          <i class="layui-edge"></i>
        </div>
        <dl class="layui-anim layui-anim-upbit">
          <dd
            v-for="(item,index) in optList"
            :key="'opt'+index"
            :class="{'layui-this':index===optIndex}"
            @click="chooseOpt(item,index)"
          >{{item}}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'paginate',
  props: {
    align: {
      default: 'right',
      type: String
    },
    showType: {
      default: 'text',
      type: String
    },
    showEnd: {
      default: false,
      type: Boolean
    },
    theme: {
      default: 'layui-bg-green',
      type: String
    },
    hasTotal: {
      default: false,
      type: Boolean
    },
    hasSelect: {
      default: false,
      type: Boolean
    },
    total: {
      default: 100,
      type: Number
    },
    current: {
      default: 0,
      type: Number
    },
    size: {
      default: 10,
      type: Number
    }
  },
  mounted () {
    this.limit = this.size
    this.initPage()
    this.optList = _.uniq(_.sortBy(_.concat(this.optList, this.limit)))
    this.optIndex = this.optList.indexOf(this.limit)
  },
  data () {
    return {
      isSelect: false,
      optIndex: 0,
      optList: [10, 20, 30, 50, 100],
      pages: [],
      limit: 20,
      cur: 1
    }
  },
  watch: {
    total (newval, oldval) {
      this.initPage()
    }
  },
  methods: {
    changePage (e) {
      if (e.keyCode === 13) {
        if (this.cur > this.pages.length) {
          this.$pop('shake', '跳转页数不能大于总页数')
          return
        }
        this.changeCurrent(this.cur - 1)
      }
    },
    initPage () {
      const page = Math.ceil(this.total / this.limit)
      this.pages = _.range(1, page + 1)
    },
    changeSelect () {
      this.isSelect = !this.isSelect
    },
    changeCurrent (val) {
      if (this.current === val) {
        return
      }
      this.$emit('changeCurrent', val, this.limit)
    },
    changeLimit (cur) {
      this.$emit('changeCurrent', cur, this.limit)
    },
    chooseOpt (item, index) {
      if (index === this.optIndex) {
        return
      }
      this.optIndex = index
      this.limit = this.optList[index]
      this.initPage()
      const cur = Math.floor((this.current) * this.size / this.limit)
      this.changeLimit(cur)
    },
    home () {
      this.changeCurrent(0)
    },
    prev () {
      let cur = this.current
      if (cur - 1 < 0) {
        cur = 0
      } else {
        cur--
      }
      this.changeCurrent(cur)
    },
    next () {
      let cur = this.current
      if (cur + 1 >= this.pages.length) {
        cur = this.pages.length - 1
      } else {
        cur++
      }
      this.changeCurrent(cur)
    },
    end () {
      this.changeCurrent(this.pages.length - 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.layui-bg-green {
  border-color: #009688;
}
.active {
  border-radius: 2px;
  position: relative;
  z-index: 200;
}
.page-total {
  position: relative;
  top: -3px;
  color: rgb(51, 51, 51);

}
.layui-input {
    display: inline-block;
    width: 70px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
.page-select{
  width: 70px;
  position: relative;
  top: -2.5px;
}
</style>
